<template>
	
	<view class="goods-detail">
		<view class="mark">
			
		</view>
		<!-- <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration">
			<swiper-item v-for="(item,index) in images">
				<view class="swiper-item">
					<image :src="item" mode="widthFix"></image>
				</view>
			</swiper-item>
		</swiper> -->
		<swiper class="swiper" circular indicator-dots="indicatorDots" autoplay="autoplay" interval="interval" duration="duration">
			<swiper-item >
				<view class="swiper-item">
					<image :src="goodsDetails.goodsLogo" mode="widthFix"></image>
				</view>
				
			</swiper-item>
			<!-- <swiper-item >
				<view class="swiper-item">
					<image src="https://minigroup-v6.oss-cn-beijing.aliyuncs.com/uploads/image/2022-03/e8f761987bebf25f31114c784d15703e.png" mode="widthFix"></image>
				</view>
			</swiper-item> -->
		</swiper>
		<view class="detail-body">
			<view class="goods-text">
				<view class="price">￥{{goodsDetails.marketPrice}}.00<text class="del-price">{{goodsDetail.originalPrice}}</text></view>
				<view class="month-sale">月销量：{{goodsDetails.salesSum}}+</view>
			</view>
			<view class="goods-title"><text class="tag">自营</text>{{goodsDetails.goodsName}}</view>
			<!-- <view @click="couponClick" class="coupon-b"
				style="background-image: url(https://api.gold404.cn/taoke/images/coupon-b.png);">
				<view>
					<text style="font-size: 54rpx;display: block;">￥{{goodsDetail.couponPrice}}</text>
					<text class="coupon-time">使用期限 {{goodsDetail.couponStartTime}}~{{goodsDetail.couponEndTime}}</text>
				</view>
				<text class="coupon-text">立即领券</text>
			</view> -->
		</view>
		<!-- 店铺信息 -->
		<view class="goods-shop">
			<view class="logo">
				<image :src="goodsDetail.shopLogo" mode="widthFix"></image>
			</view>
			<view class="shop-info">
				<view>
					<text class="name">{{goodsDetail.shopName}}</text>
				</view>
				<view class="desc">
					<text>描述{{goodsDetail.dsrScore}}</text>
					<text>卖家{{goodsDetail.serviceScore}}</text>
					<text>物流{{goodsDetail.shipScore}}</text>
				</view>
			</view>
		</view>
		<!-- 商品评价 -->
		<!-- <view class="goods-comment">
			
		</view> -->
		<!-- 商品详情 -->
		<view class="goods-show">
			<view class="title" >商品详情</view>
			<view class=""  v-for="(items,index) in images_price">
				<image :src="items.imageUrl" @tap="previewImage(index)" mode="widthFix"></image>
			</view>
			
			
		<!-- 	<image src="https://i02piccdn.sogoucdn.com/55fb22b272a26569" mode="widthFix"></image>
			<image src="https://i02piccdn.sogoucdn.com/af3cf9c402ec3ca4" mode="widthFix"></image>
		 -->
		</view>
		
		<view class="bar">
		   
		       <view class="bar_item">
		           <uni-icons type="home" color="#000" size="30" @click="goIndex()">
					   <image src="../../../static/images/home.png" mode="widthFix"></image>
				   </uni-icons>
		           <text>首页</text>
		       </view>
		   
		       <view class="bar_item">
		           <uni-badge text="6" type="error" absolute="rightTop" size="small">
		               <uni-icons type="chat" color="#000" size="30">	
					<image src="../../../static/images/service.png" mode="widthFix"></image>
				</uni-icons>
		           </uni-badge>
		           <text>客服</text>
		       </view>
		   
		       <view class="bar_item">
		           <uni-badge text="6" type="error" absolute="rightTop" size="small">
		               <uni-icons type="cart" color="#000" size="30" @click="goShopCart()">
						   <image src="../../../static/images/shoping1.png" mode="widthFix"></image>
					   </uni-icons>
		           </uni-badge>
		           <text>购物车</text>
		       </view>
		   
		       <view class="bar_item1" style="background-color: #FC8A05;" @tap="addShopping">
		           <text>加入购物车</text>
		       </view>
		   
		       <view class="bar_item1" style="background-color: #DB0F0F;" @click="toBuynow()">
		           <text>立即购买</text>
		       </view>
		   
		   </view>
		
		<!-- 规格-模态层弹窗 -->
		<view class="popup spec" :class="specClass" @touchmove.stop.prevent="discard" @tap="hideSpec">
			<!-- 遮罩层 -->
			<view class="mask"></view>
			<view class="layer" @tap.stop="discard">
				<view class="content">
					<view class="title">选择规格：
						<radio-group @change="radioChange">
										<label class="uni-list-cell uni-list-cell-pd" v-for="(items, index) in spec_price" :key="items.value">
											<view style="margin-top: 5px;">
												<radio :value="items.value" :checked="index === current" @tap="handlingData(items)" />{{items.item}}
											</view>
										</label>
						</radio-group>
						
					</view>
					
					
				</view>
				<view class="btn"><view class="button" @tap="hideSpec">完成</view></view>
			</view>
		</view>
		
	</view>
	
</template>

<script>
	import {parseTime} from "@/utils/tool.js"
	import http from "@/store.js"
	import Vue from 'vue'
	import {request} from '@/utils/request.js'
	export default {
		props:{
			images:{},
			
			
			indicatorDots:{
				type:Boolean,
				default:true
			},
			autoplay:{
				type:Boolean,
				default:true
			},
			interval:{
				default:5000
			},
			duration:{
				default:500
			}
		},
		data() {
			return {
				goodsId:0,
				cartAttr:{
					specKey:"",
					goodsNum:"1"
				},
				details:{
					id:1,
					classid:2,
					picurl:'https://i02piccdn.sogoucdn.com/27dedd9fc1bab403',
					title:'测试浏览记录'
				},
				goodsDetails:{
					goodsId:0,
					goodsLogo:"https://minigroup-v6.oss-cn-beijing.aliyuncs.com/uploads/image/2022-03/3fa790e17aa5b21fec4c2cf490503139.png",
					goodsRemark:"100%纯棉",
					salesSum:99,
					marketPrice:100,
					goodsName:"123"
				},
				images_price:[
				{
					imageUrl:"https://i01piccdn.sogoucdn.com/046dfcce4a34c4a8"
				},
				{
					imageUrl:"https://i02piccdn.sogoucdn.com/55fb22b272a26569"
				},
				{
					imageUrl:"https://i02piccdn.sogoucdn.com/af3cf9c402ec3ca4"
				}
				],
				spec_price:[
					{
						item:"100cm"
					},
					{
						item:"110cm"
					},
					{
						item:"120cm"
					},
					{
						item:"130cm"
					},
				],
				goodsDetail:{
					type:Object,
					default:{},
					shopLogo:'../../../static/images/brand.jpg',
					shopName:'校园大道',
					dsrScore:'222',
					serviceScore:'eee',
					shipScore:'eee',
					
				},
				// 遮罩层  状态
				specClass:'',
			}
		},
		
		
		mounted() {
			// console.log(this.goodsDetail)
			
		},
		
		onLoad:function(object){
			//this.goodsDetails={},
			uni.showToast({
				title:"上级跳转 goodsid"+object.goodid
			})
			
		// let token =	uni.getStorageSync("access_token");
		// 	console.log("token access_token "+token)
			this.request({
							url: 'shop/mall-goods-detail',
							method: 'GET',
							data:{
								goods_id:object.goodid
							},
						}).then(res => {
							
							this.goodsId=res.data.detail.goodsId
							this.goodsDetails=res.data.detail
							this.spec_price=res.data.spec_price
							this.images_price=res.data.images_price
							this.saveHistory();
									
						})

		
			
		},
		methods: {
		 // radioChange: function(evt) {
		 //            for (let i = 0; i < this.items.length; i++) {
		 //                if (this.items[i].value === evt.detail.value) {
		 //                    this.current = i;
		 //                    break;
		 //                }
		 //            }
		 //        },
		handlingData(items){
					this.cartAttr.specKey=items.item
						console.log(this.cartAttr);
			},
			// 多张 图片预览 
			previewImage(index) { // index 索引 如果 需要复用方法 可以使用 类型来进行区分(val)
				// var photoList = this.images_price
				// uni.previewImage({
				// 	current: val,     // 当前显示图片的索引值
				// 	urls: photoList,    // 需要预览的图片列表，photoList要求必须是数组
				// 	loop:true,          // 是否可循环预览
				// })
				uni.previewImage({
					current: index, 
					urls: this.images_price,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			couponClick(){
				this.$emit('couponClick')
			},
			toBuynow(){
				//uni.showToast({title: "啊实打实的"});
				uni.navigateTo({
					  //url:`/pages/detail/detail?cid=51&id=253`
					  url:`/pages/shop/shop_list/buy-now?goodsid=`+this.goodsId
				})
			},
		// 添加用户查看历史
		saveHistory(){
			
			let historyArr=uni.getStorageSync("historyArr") || []
			let item={
				id:this.goodsDetails.goodsId,
				classid:this.details.classid,
				picurl:this.goodsDetails.goodsLogo,
				title:this.goodsDetails.goodsName,
				looktime:parseTime(Date.now())
			}		
			historyArr.unshift(item)	
			console.log(item)
			console.log(historyArr)
			historyArr=historyArr.slice(0,10)		
			uni.setStorageSync("historyArr",historyArr)
		},
		// 点击添加购物车 
		addShopping(){
			this.specClass='show'
		},
		//  加入购物车完成
		hideSpec(){
			console.log(this.delArr)
			this.request({
					url: 'shop/mall-add-cart',
					method: 'POST',
					data:{
						cartAttr:this.cartAttr,
						goodsId:this.goodsId
					},
					}).then(res => {
						
						console.log(res)
						if(res.code==4000){
							uni.showToast({
								title:"商品已添加购物车 ！！！"
							})
						}else{
							uni.showToast({
								title:"添加购物车成功 ！！！"
							})
						}
						
					})
			this.specClass='none'
		},
		goIndex(){
			uni.switchTab({
				url:'/pages/shop/index/index'
			})
		},
		goShopCart(){
			uni.navigateTo({
				  //url:`/pages/detail/detail?cid=51&id=253`
				  url:`/pages/commodity/ShoppingCart/index`
			})
		}
		}
		
	}
</script>

<style lang="scss" scoped>
	
	// ---------------- 遮罩层  begin ----------------------
	 .mark{
	   	position:absolute;
	   	height: 500rpx; 
	   	color: #fff;
	   	background: rgba(0, 0, 0, 0.5); 
		// background-color: #ff0000;
	   	left: 0%;
	   	right: 0%;
	   	margin-top: -500px;
	   	font-size: 26rpx;
	   	text-align: center;
	   	box-shadow: 2px -3px 100px -5px  #FFFFFF;
	   
	   }
	   
	   	// ---------------- 遮罩层  end ----------------------


	$pad:20rpx 20rpx;
	@mixin flex-between {
		display: flex;
		justify-content: space-between;
	}
	@mixin box-shadow {
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		border-radius: 12px;
	}
	.goods-detail{
		flex: 1;
		background-color: #f7f8fa;
	}
	.detail-body{
		background-color: #fff;
		padding:$pad;
		margin:20rpx;
		@include box-shadow;
	}
	.swiper{
		height: 600rpx;
	}
	.swiper-item{
		image{
			width: 100%;
		}
	}
	.goods-text{
		@include flex-between;
		.price{
			color: #cb0000;
			font-weight: 600;
			font-size: 52rpx;
			.del-price{
				color: #888;
				font-size: 28rpx;
				margin-left: 5px;
				text-decoration: line-through;
			}
		}
		.month-sale{
			display: flex;
			align-items: flex-end;
			margin-bottom: 6rpx;
			color: #888;
			font-size: 28rpx;
		}
	}
	
	.goods-title {
		font-size: 32rpx;
		font-weight: 600;
		margin: 8rpx 0;
		.tag{
			background-color: red;
			color: #fff;
			font-size: 20rpx;
			line-height: 1;
			font-weight: normal;
			padding: 4rpx 6rpx;
			border-radius: 4px;
			margin-right: 4px;
			position: relative;
			top: -4rpx;
		}
	}
	.goods-shop{
		display: flex;
		margin: 20rpx;
		background-color: #fff;
		padding: $pad;
		@include box-shadow;
		.logo{
			margin-right: 20rpx;
			image{
				width: 120rpx;
				height: 120rpx;
				border-radius: 5px;
			}
		}
		.shop-info{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding-bottom: 10rpx;
			flex: 1;
			.name{
				font-weight: bold;
			}
		}
		.desc{
			font-size: 24rpx;
			color: #888;
			text{
				margin-right: 30rpx;
			}
		}
	}
	.goods-show{
		background-color: #fff;
		
		font-weight: bold;
		.title{
			padding: $pad;
			margin: 0 20rpx 0 20rpx;
			position: relative;
			&:before{
				position: absolute;
				left: 8rpx;
				top: 30rpx;
				content: "";
				display: block;
				width: 3px;
				height: 25rpx;
				background-color: red;
			}
		}
		image{
			outline-width: 0;
			vertical-align: top;
			width: 100%;
		}
	}
	.coupon-b {
		@include flex-between;
		margin: 20rpx 0;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		height: 130rpx;
		align-items: center;
		padding: 0 30rpx;
		color: #fff;
	}
	
	.coupon-text {
		font-size: 32rpx;
		letter-spacing: 2rpx;
		margin-right: 22rpx;
	}
	
	.coupon-time {
		color: rgba(255, 255, 255, 0.67);
		font-size: 24rpx;
	}
	
	.kouling-box {
		width: 100%;
		height: 100%;
		padding: 20rpx;
		text-align: center;
		/* border-radius: 10px; */
	}
	
	.kouling-text {
		text-align: left;
		margin: 30rpx 0;
		background-color: #f7dfad;
		padding: 30rpx;
		border-radius: 5px;
		border: 1px solid #ce5d6a;
	}

	.bar {
		// flex: 0;
	    height: 50px;
	    display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #fff;
	    .bar_item {
	        width: 14%;
	        padding: 8px 0px 12px;
	        text-align: center;
	        font-size: 10px;
	       // color: $uni-text-color-two;
	        display: flex;
	        flex-direction: column; //修改轴方向
	        align-items: center; //上下居中
	
	        image {
	            width: 15px;
	            height: 15px;
	        }
	    }
	
	    .bar_item1 {
	        width: 30%;
	        font-size: 14px;
	        //color: $uni-bg-color;
	        text-align: center;
	        line-height: 50px;
	    }
	
	}
	
	
	//-------------------------------   遮罩层  begin---------------------
	
	
	.popup {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 20;
		display: none;
		.mask{
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 21;
			background-color: rgba(0, 0, 0, 0.6);
		}
		.layer {
			position: fixed;
			z-index: 22;
			bottom: 0%;
			width: 101%;
			padding: 0 4%;
			height: 42%;
			border-radius: 20upx 20upx 0 0;
			background-color: #fff;
			display: flex;
			flex-wrap: wrap;
			align-content: space-between;
			.content {
				width: 100%;
				padding: 20upx 0;
			}
			.btn {
				width: 100%;
				height: 100upx;
				.button {
					width: 100%;
					height: 80upx;
					border-radius: 40upx;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: #ce5d6a;
					font-size: 28upx;
				}
			}
		}
		
		&.show {
			display: block;
			.mask{
				animation: showPopup 0.2s linear both;
			}
			.layer {
				animation: showLayer 0.2s linear both;
			}
		}
		&.hide {
			display: block;
			.mask{
				animation: hidePopup 0.2s linear both;
			}
			
			.layer {
				animation: hideLayer 0.2s linear both;
			}
		}
		&.none {
			display: none;
		}
		&.service {
			.row {
				margin: 30upx 0;
				.title {
					font-size: 30upx;
					margin: 10upx 0;
				}
				.description {
					font-size: 28upx;
					color: #999;
				}
			}
		}
		&.spec {
			.title {
				font-size: 30upx;
				margin: 30upx 0;
			}
			.sp {
				display: flex;
				view {
					font-size: 28upx;
					padding: 5upx 20upx;
					border-radius: 8upx;
					margin: 0 30upx 20upx 0;
					background-color: #f6f6f6;
					&.on {
						padding: 3upx 18upx;
						border: solid 1upx #f47925;
					}
				}
			}
			.length{
				margin-top: 30upx;
				border-top: solid 1upx #aaa;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-top: 20upx;
				.text{
					font-size: 30upx;
				}
				.number{
					display: flex;
					justify-content: center;
					align-items: center;
					.input{
						width: 80upx;
						height: 60upx;
						margin: 0 10upx;
						background-color: #f3f3f3;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
						input{
							width: 80upx;
							height: 60upx;
							display: flex;
							justify-content: center;
							align-items: center;
							text-align: center;
							font-size: 26upx;
						}
					}
					
					.sub ,.add{
						width: 60upx;
						height: 60upx;
						background-color: #f3f3f3;
						border-radius: 5upx;
						.icon{
							font-size: 30upx;
							width: 60upx;
							height: 60upx;
							display: flex;
							justify-content: center;
							align-items: center;
							
						}
					}
				}
			}
			
		}
	}
	//---------------------  遮罩层 end ------------------------------
	
</style>
